<template>
 <div class="publicBox" id="supplierEditCSS">
<el-form ref="form" label-position="left" :model="ruleForm" label-width="160px" :rules="rules" class="demo-form-inline publicEditFrom">

  <el-row>
       <div class="pubPageTagP">
                 <p>供应商管理/编辑</p>
       </div>
  </el-row>

<el-row v-if="disabledFlag">
  <el-form-item label="供应商ID">
           <p>{{rowData.no}}</p>
  </el-form-item>
</el-row>


<el-row > 
  <el-form-item label="供应商名称" prop="name">
           <el-input class="pubSerIpt" v-if="!disabledFlag" v-model="ruleForm.name"  placeholder="请输入供应商全称"></el-input>
           <p v-else>{{ruleForm.name}}</p>
  </el-form-item>
</el-row>

<el-row>
  <el-form-item label="供应商产品" prop="products">
            <el-input class="pubSerIpt" v-model="ruleForm.products"  placeholder="请输入供应商所提供的产品类型，多个使用逗号“，”隔开"></el-input>
  </el-form-item>
</el-row>

<el-row>
  <el-form-item label="地址" prop="address">
            <el-input class="pubSerIpt" v-model="ruleForm.address"  placeholder="请输入供应商地址"></el-input>
  </el-form-item>
</el-row>

<el-row>
    <el-form-item label="联系人" prop="contacts">
            <el-input class="pubSerIpt" v-model="ruleForm.contacts"  placeholder="请输入供应商联系人姓名"></el-input>
  </el-form-item>
</el-row>

<el-row>
     <el-form-item label="联系电话" prop="phone">
            <el-input class="pubSerIpt" v-model.number="ruleForm.phone"  placeholder="请输入供应商联系人电话"></el-input>
  </el-form-item>
</el-row>

<el-row>
    <el-form-item label="状态" prop="status">
      <el-radio v-model.number="ruleForm.status" :label=2>启用</el-radio>
      <el-radio v-model.number="ruleForm.status" :label=3>禁用</el-radio>
  </el-form-item>
</el-row>

<el-row class="pubSubmitBtn-row">
  <el-form-item>
            <el-button class="pubBtnBlue"   @click="addSupplierApi" type="primary">保存</el-button>
            <el-button class="pubBtnGray"   @click="$canCleFn"  type="primary">取消</el-button>
  </el-form-item>
</el-row>

</el-form>

  </div>
</template>

<script>
import * as Api from '@api/equipmenter.js'
export default {
  components: {
   
 
  },
  data() {
    return {
      disabledFlag:false,
      rowData:"",
      ruleForm:{
          products:"", 
          name:"",
          address:"",
          status:2,
          phone:"",
          contacts:"",
      },
      rules: {
          mphone: [
            {required: true, message: '请输入供应商全称', trigger: 'blur' },
          ]
        }
  }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
     async addSupplierApi(){
           let res=""
           if(this.disabledFlag){  //修改
              this.ruleForm.id=this.rowData.id
              res= await Api.editSupplierApi(this.ruleForm)
           }else{  //新增
              res= await Api.addSupplierApi(this.ruleForm)
           }
           if(res.IsPositive){
              this.$message.success({message:"操作成功"})
              this.$router.push({path:"/platform/equipment/supplier"})
           }else{
              this.$message.error({message:res.ErrorCode})
           }
     }
  },
  created() {
           if(Object.keys(this.$route.query).length>0){              //ES6写法, Object.keys(targetObject)  将对象的key作为一个数组返回
                  this.disabledFlag=true        //true代表修改数据
                  this.rowData=this.$route.query.data
                  this.ruleForm={
                           products:this.rowData.products, 
                           name:this.rowData.name, 
                           address:this.rowData.address, 
                           status:this.rowData.status, 
                           phone:this.rowData.phone, 
                           contacts:this.rowData.contacts
                  }
        }

  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less'>
@import "../../styles/less/public.less";
  #supplierEditCSS{
    .head_text{
      width: 118px;
      font-size:16px;
      margin-top:17px;
      margin-bottom: 8px;
      p{
        color: #a7a7a7;
      }
    }
    .el-form-item{
      .el-form-item__label{
        font-size: 16px;
      }
      p{
        font-size: 16px;
      }
    }
    .el-radio__inner{
      width: 20px;
      height: 20px;
    }
  }
</style>